<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>Hugo快速上手 - 负责和大饼的博客</title><meta name="Description" content="想专注于学点手艺"><meta property="og:title" content="Hugo快速上手" />
<meta property="og:description" content="为什么选择 Hugo ？

快！世界上最快的静态网站生成工具！5秒生成6000个页面！
超详细的文档，虽然是英文的
活跃的社区
更加自由的内容组织方式
丰富的主题，目前主题数量已经超过 Hexo

Hugo 有哪些劣势 ？

死气沉沉的中文社区&hellip;中文板块平均一年一个主题&hellip;
你喜欢的某个 Jekyll 或者 Hexo 主题是无法直接用在 Hugo 上的 ┑(￣Д ￣)┍

那么&hellip;" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://amath0312.github.com/hugo_quick_start/" />
<meta property="article:published_time" content="2019-07-24T22:48:09+08:00" />
<meta property="article:modified_time" content="2019-07-24T22:48:09+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Hugo快速上手"/>
<meta name="twitter:description" content="为什么选择 Hugo ？

快！世界上最快的静态网站生成工具！5秒生成6000个页面！
超详细的文档，虽然是英文的
活跃的社区
更加自由的内容组织方式
丰富的主题，目前主题数量已经超过 Hexo

Hugo 有哪些劣势 ？

死气沉沉的中文社区&hellip;中文板块平均一年一个主题&hellip;
你喜欢的某个 Jekyll 或者 Hexo 主题是无法直接用在 Hugo 上的 ┑(￣Д ￣)┍

那么&hellip;"/>
<meta name="application-name" content="负责和大饼的博客">
<meta name="apple-mobile-web-app-title" content="负责和大饼的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://amath0312.github.com/hugo_quick_start/" /><link rel="prev" href="https://amath0312.github.com/hugo_even_preview/" /><link rel="next" href="https://amath0312.github.com/architect_awesome/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Hugo快速上手",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/amath0312.github.com\/hugo_quick_start\/"
        },"genre": "posts","keywords": "转载, Hugo, 建站","wordcount":  4464 ,
        "url": "https:\/\/amath0312.github.com\/hugo_quick_start\/","datePublished": "2019-07-24T22:48:09+08:00","dateModified": "2019-07-24T22:48:09+08:00","publisher": {
            "@type": "Organization",
            "name": "Author"},"author": {
                "@type": "Person",
                "name": "Author"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="负责和大饼的博客">负责和大饼的博客</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> Blog </a><a class="menu-item" href="/categories/"> Categories </a><a class="menu-item" href="/tags/"> Tags </a><a class="menu-item" href="/about/"> About </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="Search">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="Clear">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="负责和大饼的博客">负责和大饼的博客</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="Search">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="Clear">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        Cancel
                    </a>
                </div><a class="menu-item" href="/posts/" title="">Blog</a><a class="menu-item" href="/categories/" title="">Categories</a><a class="menu-item" href="/tags/" title="">Tags</a><a class="menu-item" href="/about/" title="">About</a><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">Hugo快速上手</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>Author</a></span>&nbsp;<span class="post-category">included in <a href="/categories/blog/"><i class="far fa-folder fa-fw"></i>Blog</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2019-07-08">2019-07-08</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;4464 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;9 minutes&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#安装-hugo">安装 Hugo</a></li>
    <li><a href="#建站">建站</a></li>
    <li><a href="#添加一个主题">添加一个主题</a></li>
    <li><a href="#开始写作">开始写作</a></li>
    <li><a href="#基本使用">基本使用</a></li>
    <li><a href="#目录结构">目录结构</a></li>
    <li><a href="#配置-hugo">配置 Hugo</a></li>
  </ul>

  <ul>
    <li><a href="#组织content文件夹">组织content/文件夹</a></li>
    <li><a href="#hugo-中的路径分解">Hugo 中的路径分解</a></li>
    <li><a href="#hugo-中的类型">Hugo 中的类型</a></li>
    <li><a href="#front-matter">Front Matter</a></li>
    <li><a href="#模板选择顺序">模板选择顺序</a></li>
    <li><a href="#url管理">URL管理</a></li>
    <li><a href="#内容摘要">内容摘要</a></li>
    <li><a href="#shortcodes">Shortcodes</a></li>
    <li><a href="#分类系统">分类系统</a></li>
  </ul>

  <ul>
    <li><a href="#custom-output-formats">Custom Output Formats</a></li>
    <li><a href="#扩展阅读">扩展阅读</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><p><strong>为什么选择 Hugo ？</strong></p>
<ul>
<li>快！世界上最快的静态网站生成工具！<a href="https://twitter.com/dzello/status/895835610476199939" target="_blank" rel="noopener noreffer">5秒生成6000个页面！</a></li>
<li>超详细的文档，<del>虽然是英文的</del></li>
<li>活跃的<a href="https://discourse.gohugo.io/" target="_blank" rel="noopener noreffer">社区</a></li>
<li>更加自由的内容组织方式</li>
<li>丰富的主题，目前主题数量已经超过 Hexo</li>
</ul>
<p><strong>Hugo 有哪些劣势 ？</strong></p>
<ul>
<li>死气沉沉的中文社区&hellip;<a href="https://discourse.gohugo.io/c/chinese" target="_blank" rel="noopener noreffer">中文板块</a>平均一年一个主题&hellip;</li>
<li>你喜欢的某个 Jekyll 或者 Hexo 主题是无法直接用在 Hugo 上的 ┑(￣Д ￣)┍</li>
</ul>
<p><strong>那么&hellip;</strong></p>
<h1 id="翻滚吧奈亚子">翻滚吧！奈亚子！</h1>
<h2 id="安装-hugo">安装 Hugo</h2>
<p>macOS</p>
<pre><code>brew install hugo
</code></pre><p>Windows</p>
<pre><code># 前往 https://github.com/gohugoio/hugo/releases
# 下载 hugo_X.XX_Windows-64bit.zip
# 解压得到 hugo.exe
# 将 hugo.exe 所在目录添加至系统环境变量
# 安装完成！
</code></pre><p>验证安装是否成功</p>
<pre><code>hugo version
</code></pre><p>其他系统请参考<a href="https://gohugo.io/getting-started/installing/" target="_blank" rel="noopener noreffer">官方文档——安装</a></p>
<h2 id="建站">建站</h2>
<pre><code>hugo new site quickstart
</code></pre><h2 id="添加一个主题">添加一个主题</h2>
<pre><code>cd quickstart;
git init;
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;

# 编辑你的 config.toml 配置文件使用该主题
echo 'theme = &quot;ananke&quot;' &gt;&gt; config.toml
</code></pre><h2 id="开始写作">开始写作</h2>
<pre><code>hugo new post/my-first-post.md
</code></pre><p>编辑你新建的markdown文件。现在，在启用<a href="https://gohugo.io/getting-started/usage/#draft-future-and-expired-content" target="_blank" rel="noopener noreffer">drafts</a>参数的条件下开启Hugo内置的服务器。</p>
<pre><code>hugo server -D
</code></pre><p>你的网站已经在<a href="http://localhost:1313/" target="_blank" rel="noopener noreffer">http://localhost:1313/</a>开启了。</p>
<h2 id="基本使用">基本使用</h2>
<p>最常用的命令一定是在你的站点目录下使用<code>hugo</code>命令，该命令将会生成静态文件。<del>（可以看到生成速度真的很快ᕦ(ò_óˇ)ᕤ）</del></p>
<pre><code>hugo
0 draft content
0 future content
99 pages created
0 paginator pages created
16 tags created
0 groups created
in 90 ms
</code></pre><p>这里节选出<code>new</code>与<code>server</code>这两个比较常用的命令和<code>-D</code>,<code>-E</code>,<code>-F</code>这三个参数的使用方法。更多的hugo命令可以参考<a href="https://gohugo.io/getting-started/usage/" target="_blank" rel="noopener noreffer">官方文档</a>。</p>
<pre><code>使用方法:
  hugo
  hugo [flags]
  hugo [command]
  hugo [command] [flags]

节选的 command:
  new         为你的站点创建新的内容
  server      一个高性能的web服务器

节选的 flags:
  -D, --buildDrafts                包括被标记为draft的文章
  -E, --buildExpired               包括已过期的文章
  -F, --buildFuture                包括将在未来发布的文章

举几个栗子:
  hugo -D                          生成静态文件并包括draft为true的文章
  hugo new post/new-content.md     新建一篇文章
  hugo new site mysite             新建一个称为mysite的站点
  hugo server --buildExpired       启动服务器并包括已过期的文章
</code></pre><p><em>PS: hugo server 会自动监听你的原始文稿，你在编辑原始<code>.md</code>文件时的变化都会实时的反映在网站上。如果你不希望启用这个功能你可以使用<code>hugo server --watch=false</code>命令。</em></p>
<h2 id="目录结构">目录结构</h2>
<p>在执行完<code>hugo new site</code>命令后你会得到一个包含以下文件的目录。</p>
<pre><code>.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
</code></pre><ul>
<li><strong>archetypes</strong>: 储存<code>.md</code>的模板文件，类似于<code>hexo</code>的<code>scaffolds</code>，该文件夹的优先级高于主题下的<code>/archetypes</code>文件夹</li>
<li><strong>config.toml</strong>: 配置文件</li>
<li><strong>content</strong>: 储存网站的所有内容，类似于<code>hexo</code>的<code>source</code></li>
<li><strong>data</strong>: 储存数据文件供模板调用，类似于<code>hexo</code>的<code>source/_data</code></li>
<li><strong>layouts</strong>: 储存<code>.html</code>模板，该文件夹的优先级高于主题下的<code>/layouts</code>文件夹</li>
<li><strong>static</strong>: 储存图片,css,js等静态文件，该目录下的文件会直接拷贝到<code>/public</code>，该文件夹的优先级高于主题下的<code>/static</code>文件夹</li>
<li><strong>themes</strong>: 储存主题</li>
<li><strong>public</strong>: 执行<code>hugo</code>命令后，储存生成的静态文件</li>
</ul>
<h2 id="配置-hugo">配置 Hugo</h2>
<p>编辑你的<code>config.toml</code>文件以配置你的站点。以下节选了部分<del>有趣的</del>参数，完整的配置文件可以参考<a href="https://gohugo.io/getting-started/configuration/#toml-configuration" target="_blank" rel="noopener noreffer">官方文档</a>。</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="err">+++</span>
<span class="c"># 主机名 例如: http://spf13.com/</span>
<span class="nx">baseURL</span> <span class="p">=</span>                     <span class="s2">&#34;&#34;</span>
<span class="c"># 语言编码(中文: zh-CN)</span>
<span class="nx">languageCode</span> <span class="p">=</span>                <span class="s2">&#34;&#34;</span>
<span class="c"># 默认的内容语言</span>
<span class="nx">defaultContentLanguage</span> <span class="p">=</span>      <span class="s2">&#34;zh-CN&#34;</span>

<span class="c"># 自动检测是否包含中文/日文/韩文，该参数会影响摘要和字数统计功能，建议设置为true</span>
<span class="nx">hasCJKLanguage</span> <span class="p">=</span>              <span class="kc">false</span>

<span class="c"># 若为 false，`Getting Started` 这样的英文标签将会被转换为 `getting-started`</span>
<span class="nx">preserveTaxonomyNames</span> <span class="p">=</span>       <span class="kc">true</span>

<span class="c"># 设置使用的主题名称 (默认储存在 /themes/THEMENAME/)</span>
<span class="nx">theme</span> <span class="p">=</span>        

<span class="c"># 分页</span>
<span class="nx">paginate</span> <span class="p">=</span>                    <span class="mi">10</span>
<span class="nx">paginatePath</span> <span class="p">=</span>                <span class="s2">&#34;page&#34;</span>

<span class="c"># 启用 Emoji; see emoji-cheat-sheet.com</span>
<span class="nx">enableEmoji</span> <span class="p">=</span>                 <span class="kc">false</span>

<span class="c"># 创建robots.txt，建议设置为true</span>
<span class="nx">enableRobotsTXT</span> <span class="p">=</span>             <span class="kc">false</span>

<span class="c"># 定义文章访问路径，详细见下文&#34;URL管理&#34; See &#34;content-management/urls/&#34;</span>
<span class="nx">permalinks</span> <span class="p">=</span>                  <span class="s2">&#34;&#34;</span>
<span class="err">+++</span>
</code></pre></div><p>除了预设的参数外，你也可以通过下面的方式自定义自己的参数。你可以在模板中获取到自定义的参数，通常情况下你使用的主题都会要求你这么做，具体信息可以阅读相关主题的文档。</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
  <span class="nx">author</span> <span class="p">=</span> <span class="s2">&#34;olOwOlo&#34;</span>
  <span class="nx">github</span> <span class="p">=</span> <span class="s2">&#34;olOwOlo&#34;</span>
</code></pre></div><hr>
<p>至此，你已经掌握了足够的知识，你只需要从<a href="https://themes.gohugo.io/" target="_blank" rel="noopener noreffer">主题列表</a>中挑选一个你喜欢的主题，阅读主题的文档并提供主题所需的信息，便可以开始使用<code>hugo</code>来写作了。</p>
<p>阅读下面的内容可以帮你更好的了解到<code>hugo</code>如何管理你的内容，而你又该如何更好的与<code>hugo</code>协作。</p>
<blockquote>
<p>以上是对<a href="https://gohugo.io/getting-started/" target="_blank" rel="noopener noreffer">Getting Started</a>的总结，下面是对<a href="https://gohugo.io/content-management/" target="_blank" rel="noopener noreffer">Content Management</a>的总结</p>
</blockquote>
<hr>
<h1 id="千反田同学很好奇">千反田同学很好奇！</h1>
<h2 id="组织content文件夹">组织content/文件夹</h2>
<p><code>hugo</code>会将<code>content/</code>目录下的结构反映到生成的静态网站中，如下：</p>
<pre><code>.
└── content
    └── about
    |   └── _index.md  // &lt;- https://example.com/about/
    ├── post
    |   ├── _index.md   // &lt;- https://example.com/post/
    |   ├── firstpost.md   // &lt;- https://example.com/post/firstpost/
    |   ├── happy
    |   |   └── ness.md  // &lt;- https://example.com/post/happy/ness/
    |   └── secondpost.md  // &lt;- https://example.com/post/secondpost/
    └── quote
        ├── first.md       // &lt;- https://example.com/quote/first/
        └── second.md      // &lt;- https://example.com/quote/second/
</code></pre><p>需要注意的是<code>_index.md</code>是一个比较特殊的文件，如果你只是需要一个about页面，你只需要<code>hugo new about.md</code>即可。关于<code>_index.md</code>的相关信息可以参阅<a href="https://gohugo.io/content-management/organization/#path-breakdown-in-hugo" target="_blank" rel="noopener noreffer">官方文档</a>。</p>
<h2 id="hugo-中的路径分解">Hugo 中的路径分解</h2>
<pre><code>                    section
                    ⊢--^--⊣
                               url
                    ⊢-------------^------------⊣

      baseURL             path        slug
⊢--------^--------⊣ ⊢------^-----⊣⊢----^------⊣
                  permalink
⊢----------------------^-----------------------⊣
https://example.com/events/chicago/lollapalooza/
</code></pre><h2 id="hugo-中的类型">Hugo 中的类型</h2>
<p><code>content/</code>下的内容可能不仅仅只有文章，还可能有照片甚至其他不同形式的内容。<code>hugo</code>通过<code>type</code>属性来标记不同形式的内容，根据不同的<code>type</code>值，<code>hugo</code>会选择合适的模板来渲染内容。</p>
<p>默认情况下<code>type</code>被赋值为<code>section</code>。例如：使用<code>hugo new  posts/new-post.md</code>命令得到的新文件会被默认为<code>posts</code>类型。当然你也可以在下文提到的front matter中显式的将文章的<code>type</code>指定为其他值。</p>
<h2 id="front-matter">Front Matter</h2>
<p>Hugo 支持TOML、YAML、JSON格式的Front Matter。</p>
<p>以下列出一份完整的YAML格式的Front Matter，除了必要的<code>data</code>与<code>title</code>参数外，你可以有选择性的使用其他参数。</p>
<div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nn">---</span><span class="w">
</span><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;文章标题&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;文章的描述信息&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">tags</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;标签1&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;标签2&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;标签3&#34;</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="w"></span><span class="nt">categories</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;分类1&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;分类2&#34;</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="w"></span><span class="nt">keywords</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">&#34;Hugo&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;keyword&#34;</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2012-04-06</span><span class="w">
</span><span class="w"></span><span class="nt">lastmod</span><span class="p">:</span><span class="w"> </span><span class="ld">2015-12-23</span><span class="w">
</span><span class="w"></span><span class="c"># CJKLanguage: Chinese, Japanese, Korean</span><span class="w">
</span><span class="w"></span><span class="nt">isCJKLanguage</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 如果draft为true，除非使用 --buildDrafts 参数，否则不会发布文章</span><span class="w">
</span><span class="w"></span><span class="nt">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 设置文章的过期时间，如果是已过期的文章则不会发布，除非使用 --buildExpired 参数</span><span class="w">
</span><span class="w"></span><span class="nt">expiryDate</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-01-01</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 设置文章的发布时间，如果是未来的时间则不会发布，除非使用 --buildFuture 参数</span><span class="w">
</span><span class="w"></span><span class="nt">publishDate</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-01-01</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 排序你的文章</span><span class="w">
</span><span class="w"></span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">40</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 使用这两个参数将会重置permalink，默认使用文件名</span><span class="w">
</span><span class="w"></span><span class="nt">url</span><span class="p">:</span><span class="w"> 
</span><span class="w"></span><span class="nt">slug</span><span class="p">:</span><span class="w"> 
</span><span class="w">
</span><span class="w"></span><span class="c"># 别名将通过重定向实现</span><span class="w">
</span><span class="w"></span><span class="nt">aliases</span><span class="p">:</span><span class="w">
</span><span class="w">  </span>- <span class="l">别名1</span><span class="w">
</span><span class="w">  </span>- <span class="l">/posts/my-original-url/</span><span class="w">
</span><span class="w">  </span>- <span class="l">/2010/01/01/another-url.html</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># type 与 layout 参数将会改变 Hugo 寻找该文章模板的顺序，将在下一节细述</span><span class="w">
</span><span class="w"></span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">review</span><span class="w">
</span><span class="w"></span><span class="nt">layout</span><span class="p">:</span><span class="w"> </span><span class="l">reviewarticle</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 三个比较复杂的参数</span><span class="w">
</span><span class="w"></span><span class="nt">taxonomies</span><span class="p">:</span><span class="w">
</span><span class="w"></span><span class="nt">linkTitle</span><span class="p">:</span><span class="w"> 
</span><span class="w"></span><span class="nt">outputs</span><span class="p">:</span><span class="w">
</span><span class="w"></span><span class="c"># 实验性的参数</span><span class="w">
</span><span class="w"></span><span class="nt">markup</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;md&#34;</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="c"># 你还可以自定义任何参数，这些参数可以在模板中使用</span><span class="w">
</span><span class="w"></span><span class="nt">include_toc</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">show_comments</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span><span class="nn">---</span><span class="w">
</span></code></pre></div><h2 id="模板选择顺序">模板选择顺序</h2>
<p>这是一篇<code>content/posts/</code>下的文章寻找模板的顺序（此时我们未在文章的Front Matter指定<code>type</code>与<code>layout</code>属性）：</p>
<ol>
<li>/layouts/UNSPECIFIED/UNSPECIFIED.html</li>
<li>/layouts/posts/UNSPECIFIED.html</li>
<li>/layouts/UNSPECIFIED/single.html</li>
<li>/layouts/posts/single.html</li>
<li>/layouts/_default/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/UNSPECIFIED/UNSPECIFIED.html</li>
<li>/themes/&lt;THEME&gt;/layouts/posts/UNSPECIFIED.html</li>
<li>/themes/&lt;THEME&gt;/layouts/UNSPECIFIED/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/posts/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/_default/single.html</li>
</ol>
<p>如果我们在Front Matter中添加以下代码</p>
<div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">review</span><span class="w">
</span><span class="w"></span><span class="nt">layout</span><span class="p">:</span><span class="w"> </span><span class="l">reviewarticle</span><span class="w">
</span></code></pre></div><p>该文章现在的寻找模板顺序为：</p>
<ol>
<li>/layouts/review/reviewarticle.html</li>
<li>/layouts/posts/reviewarticle.html</li>
<li>/layouts/review/single.html</li>
<li>/layouts/posts/single.html</li>
<li>/layouts/_default/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/review/reviewarticle.html</li>
<li>/themes/&lt;THEME&gt;/layouts/posts/reviewarticle.html</li>
<li>/themes/&lt;THEME&gt;/layouts/review/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/posts/single.html</li>
<li>/themes/&lt;THEME&gt;/layouts/_default/single.html</li>
</ol>
<p>值得注意的是，<strong><code>/layouts/</code> 目录下模板优先级总是高于 <code>/themes/&lt;THEME&gt;/layouts/</code> 。同理，若根目录下存在与 <code>/themes/</code> 文件夹下同名的文件夹，根目录下的文件优先级总是高于 <code>/themes/</code> 文件夹</strong>。</p>
<p>因此，在我们只是需要别人提供的主题做一些小修改时，尤其是对于一些静态资源需要进行覆盖时，将新的文件置于根目录的文件夹下而不是直接对主题进行修改，日后需要更新主题时就无需解决 git 冲突的问题了。</p>
<p>当然，如果是需要直接对 <code>/layouts/</code> 目录下的模板进行修改，还是建议新建一个 git 分支进行更改。</p>
<h2 id="url管理">URL管理</h2>
<p>正如前文所言，<code>hugo</code>会将<code>content/</code>目录下的结构反映到生成的静态网站中，但<code>config.toml</code>中的<code>permalinks</code>参数允许你自由更改内容的URL。例如：你想从<code>hexo</code>迁移到<code>hugo</code>，你可以将<code>permalinks</code>定义为下面这种形式以适应之前的URL。</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">permalinks</span><span class="p">]</span>
  <span class="nx">post</span> <span class="p">=</span> <span class="s2">&#34;/:year/:month/:title/&#34;</span>
</code></pre></div><p>上面的配置将改变<code>content/post/</code>文件夹下所有文章的URL。</p>
<p>举个栗子，<code>content/post/sample-entry.md</code>的URL将从默认的<code>https://example.com/post/sample-entry/</code>改变为<code>https://example.com/2013/11/sample-entry/</code>。</p>
<p>所有可用的属性如下：</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="err">/:</span><span class="nx">monthname</span><span class="err">/:</span><span class="nx">day</span><span class="err">/:</span><span class="nx">weekday</span><span class="err">/:</span><span class="nx">weekdayname</span><span class="err">/:</span><span class="nx">yearday</span><span class="err">/:</span><span class="nx">section</span><span class="err">/:</span><span class="nx">title</span><span class="err">/:</span><span class="nx">slug</span><span class="err">/:</span><span class="nx">filename</span><span class="err">/</span>
</code></pre></div><h2 id="内容摘要">内容摘要</h2>
<p>Hugo会自动提取文章的前70个字符作为摘要。（注意：该功能在中文环境下需要在<code>config.toml</code>中添加<code>hasCJKLanguage = true</code>才能发挥更好的效果。）</p>
<p>当然你也可以在文章内使用<!-- raw HTML omitted -->&lt;!--more--&gt;<!-- raw HTML omitted -->针对文章手动进行摘要提取，在<!-- raw HTML omitted -->&lt;!--more--&gt;<!-- raw HTML omitted -->之前出现的内容都会作为摘要使用，且能够保持渲染后的结构而不是纯文字版本。</p>
<h2 id="shortcodes">Shortcodes</h2>
<p>Shortcodes帮助你在编写markdown时快捷的插入HTML代码，功能上类似于Hexo的<a href="https://hexo.io/zh-cn/docs/tag-plugins.html" target="_blank" rel="noopener noreffer">标签插件</a>。</p>
<div class="highlight"><pre class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">ref</span><span class="w"> </span><span class="s">&#34;blog/post.md&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; https://example.com/blog/post/
<span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">ref</span><span class="w"> </span><span class="s">&#34;post.md#tldr&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; https://example.com/blog/post/#tldr:caffebad
<span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">relref</span><span class="w"> </span><span class="s">&#34;post.md&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; /blog/post/
<span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">relref</span><span class="w"> </span><span class="s">&#34;blog/post.md#tldr&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; /blog/post/#tldr:caffebad
<span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">ref</span><span class="w"> </span><span class="s">&#34;#tldr&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; #tldr:badcaffe
<span class="cp">{{</span><span class="err">&lt;</span><span class="w"> </span><span class="nx">relref</span><span class="w"> </span><span class="s">&#34;#tldr&#34;</span><span class="w"> </span><span class="err">&gt;</span><span class="cp">}}</span> =&gt; #tldr:badcaffe
</code></pre></div><p>上述代码通过内置的<code>rel</code>与<code>relref</code>帮助你快速引用站点内的其他文章。</p>
<p><em>注意: 如果你的 <code>content/</code> 目录下有多个同名的文件，引用该文章必须使用 <code>blog/post.md</code> 这样的相对路径而不是只提供 <code>post.md</code> 这样的文件名。</em></p>
<p><code>hugo</code>还内置了<code>instagram</code>、<code>tweet</code>、<code>youtube</code>等Shortcodes，可以阅读<a href="https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes" target="_blank" rel="noopener noreffer">官方文档</a>了解更多信息，你使用的主题可能也会提供Shortcodes，当然你也可以<a href="https://gohugo.io/templates/shortcode-templates/" target="_blank" rel="noopener noreffer">定制你自己的Shortcodes</a>。</p>
<h2 id="分类系统">分类系统</h2>
<p>默认情况下即<code>tags</code>与<code>categories</code>，通常来说这已经足够我们使用了，但你也可以在<code>config.toml</code>文件中添加下面的代码来添加更多的分类。</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">taxonomies</span><span class="p">]</span>
  <span class="nx">tag</span> <span class="p">=</span> <span class="s2">&#34;tags&#34;</span>
  <span class="nx">category</span> <span class="p">=</span> <span class="s2">&#34;categories&#34;</span>
  <span class="nx">series</span> <span class="p">=</span> <span class="s2">&#34;series&#34;</span>
</code></pre></div><h1 id="维包子什么都知道">维包子什么都知道！</h1>
<h2 id="custom-output-formats">Custom Output Formats</h2>
<p><code>hugo</code>能够输出多种不同格式的内容，这里简单的举个<strong>如何同时输出markdown文件</strong>的栗子:</p>
<p>在你的<code>config.toml</code>文件下添加：</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">mediaTypes</span><span class="p">]</span>
  <span class="p">[</span><span class="nx">mediaTypes</span><span class="p">.</span><span class="s2">&#34;text/plain&#34;</span><span class="p">]</span>
    <span class="nx">suffix</span> <span class="p">=</span> <span class="s2">&#34;md&#34;</span>

<span class="p">[</span><span class="nx">outputFormats</span><span class="p">.</span><span class="nx">MarkDown</span><span class="p">]</span>
  <span class="nx">mediaType</span> <span class="p">=</span> <span class="s2">&#34;text/plain&#34;</span>
  <span class="nx">isPlainText</span> <span class="p">=</span> <span class="kc">true</span>
  <span class="nx">isHTML</span> <span class="p">=</span> <span class="kc">false</span>
</code></pre></div><p>为 MarkDown 新建一个 single.md 模板，写入以下代码，并放置在 /layouts/_default/ 文件夹下</p>
<div class="highlight"><pre class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="cp">{{</span><span class="w"> </span><span class="na">.RawContent</span><span class="w"> </span><span class="cp">}}</span>
</code></pre></div><p>针对所有内容，在<code>config.toml</code>文件下添加：</p>
<div class="highlight"><pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">]</span>
  <span class="nx">page</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;MarkDown&#34;</span><span class="p">]</span>
  <span class="nx">section</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">]</span>
  <span class="nx">taxonomy</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">]</span>
  <span class="nx">taxonomyTerm</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">]</span>
</code></pre></div><p>针对某篇文章，在该文章的Front Matter中添加：</p>
<div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nt">outputs</span><span class="p">:</span><span class="w">
</span><span class="w">  </span>- <span class="l">html</span><span class="w">
</span><span class="w">  </span>- <span class="l">markdown</span><span class="w">
</span></code></pre></div><p>在模板中的合适位置添加代码链接到你的<code>.md</code>文件：</p>
<div class="highlight"><pre class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="cp">{{</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="na">.OutputFormats.Get</span><span class="w"> </span><span class="s">&#34;markdown&#34;</span><span class="w"> </span><span class="cp">-}}</span>
<span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;</span><span class="cp">{{</span><span class="w"> </span><span class="na">.Permalink</span><span class="w"> </span><span class="cp">}}</span><span class="s">&#34;</span><span class="p">&gt;</span>查看本文 Markdown 版本 »<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<span class="cp">{{-</span><span class="w"> </span><span class="k">end</span><span class="w"> </span><span class="cp">}}</span>
</code></pre></div><h2 id="扩展阅读">扩展阅读</h2>
<ul>
<li><a href="http://www.gohugo.org/" target="_blank" rel="noopener noreffer">Hugo 中文文档</a> —— 翻译了一部分</li>
<li><a href="http://www.zimustudio.com/hugo.html" target="_blank" rel="noopener noreffer">字母-原创设计技术</a> —— 翻译了更多的一部分</li>
<li><a href="http://www.g-var.com/tags/hugo/" target="_blank" rel="noopener noreffer">Hugo</a> —— 完整翻译</li>
<li>上述翻译版本差不多都是两年前的了，还是推荐**<a href="https://gohugo.io/documentation/" target="_blank" rel="noopener noreffer">官方文档</a>**</li>
</ul></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2019-07-08</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a>,&nbsp;<a href="/tags/hugo/">hugo</a>,&nbsp;<a href="/tags/%E5%BB%BA%E7%AB%99/">建站</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/hugo_even_preview/" class="prev" rel="prev" title="Hugo 主题 Nuo 文章样式预览"><i class="fas fa-angle-left fa-fw"></i>Hugo 主题 Nuo 文章样式预览</a>
            <a href="/architect_awesome/" class="next" rel="next" title="后端架构师技术图谱">后端架构师技术图谱<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.75.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2019 - 2020</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank"></a></span>&nbsp;|&nbsp;<span class="license">本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可</span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/autocomplete/autocomplete.min.js"></script><script type="text/javascript" src="/lib/algoliasearch/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{},"search":{"algoliaAppID":"JJRDOPDPLW","algoliaIndex":"amath_blog","algoliaSearchKey":"e529bedc6a3af35b53e2597f1c7550c2","highlightTag":"em","maxResultLength":10,"noResultsFound":"No results found","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
